<template>
  <div class="app-container calendar-list-container">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="userName">
              <el-input type="text" v-model="userForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker v-model="userForm.birthday"></el-date-picker>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="userForm.sex" placeholder="请选性别">
                <el-option v-for="(type,index) in sexType" :label="type.name" :value="type.value" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input type="text" v-model="userForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.moblie" placeholder="手机号码" disabled></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('userForm')">提交</el-button>
              <el-button @click="resetForm('userForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import { mapState } from "vuex";
import myUpload from "vue-image-crop-upload";
import { getToken } from "@/util/auth";
import request from "@/router/axios";
import url from '@/const/apiURL'
import { Message } from 'element-ui'
import { dict } from '@/const/dict'

export default {
  components: {
    myUpload
  },
  data () {
    return {
      sexType: [],
      show: false,
      headers: {
        sessionKey: getToken()
      },
      userForm: {
        userName: '',
        email: '',
        sex: '',
        birthday: ''
      },
      rules: {
        userName: [{ required: true, trigger: 'blur', message: "用户名必填" }]
      }
    }
  },
  created () {
    this.sexType = dict().SexType
    this.init()
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    init () {
      this.viewOp(this.userInfo.userCode).then(data => {
        if (data) {
          this.userForm = data
        }
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          request({
            url: url.USER_MY_EDIT_URL,
            method: 'post',
            data: this.userForm
          }).then(response => {
            if (response) {
              Message({
                title: '成功',
                message: '修改成功',
                type: 'success',
              });
              this.$store.dispatch('LogOut').then(() => {
                location.reload()
              });
            }
          })
        } else {
          return false;
        }
      });
    },
    viewOp (code) {
      return request({
        url: url.USER_VIEW_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'userCode': code }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    toggleShow () {
      this.show = !this.show
    },
    cropUploadSuccess (data, field) {
      if (data.success) {
        this.userForm.headUrl = data.data
      }
    }
  }
};
</script>
<style>
.head_img {
  height: 90px;
}
.head_img img {
  width: 90px;
  height: 90px;
  border-radius: 50px;
}
</style>